<template>
  <div>
    <div class="search-bar">
      <button @click="showSearchBar()" class="search-btn">使用关键字搜索 问答/名师/作品/新闻</button>
    </div>
    <div class="tabs-wrapper">
      <ul class="tags-tab">
        <li v-for="(item, index) in catalogs" @click="switchActive(index)" :class="['tag-item', activeIndex == index ? 'tag-selected' : '']">{{ item.name }}</li>
      </ul>
    </div>
    <ul class="master-list-wrapper">
      <li v-for="(item, index) in dataList[activeIndex].results" @click="viewDetail(index)" class="master-info-item">
        <div class="avatar-wrapper">
          <img class="avatar-image" alt="" :src="item.avatar" />
          <div class="level-wrapper">
            <p>{{ item.level.name[0] }}</p>
          </div>
        </div>
        <div class="info-wrapper">
          <div class="info-content">
            <p class="name">{{ item.realname }}</p>
            <span class="info">{{ item.title }}</span>
            <p class="info"> {{ item.answer_count }}回答 &nbsp;&nbsp; {{ item.fans_count }}粉丝 </p>
          </div>
        </div>
        <div class="info-button-wrapper">
          <div @click.stop="askQuestion(index, $event)" class="action-btn btn-yellow">请教</div>
        </div>
      </li>
    </ul>
    <blank-content v-if="!dataList[activeIndex].results.length" text="暂无点评师"></blank-content>
    <search-popup value="" :show-popup="showSearch" @close="closeSearch" ></search-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import request from '@/util/request'
import * as consts from '@/util/const'

import { mapGetters } from 'vuex'
import SearchPopup from '@/components/searchPopup'

Vue.component(SearchPopup.name, SearchPopup)

export default {
  name: 'MasterList',
  data () {
    return {
      showSearch: false,
      catalogs: [{ 'name': '热门'}],
      activeIndex: 0,
      dataList: [{results: []}]
    }
  },
  created () {
    this.getCatalogs()
    this.initData()
  },
  computed: {
    ...mapGetters([
      'userInfo',
    ])
  },
  methods: {
    showSearchBar() {
      this.showSearch = true
    },
    closeSearch() {
      this.showSearch = false
    },
    viewDetail(index) {
      var master = this.dataList[this.activeIndex].results[index]
      var params = { master: master, id: master.id }
      this.$router.push({ name: 'masterDetail', params: params})
    },
    askQuestion(index, event) {
      var master = this.dataList[this.activeIndex].results[index]
      if (this.userInfo.id == master.id) {
        return this.$toast('不能向自己请教')
      }
      this.$router.push({ name: 'questionRelease', params: { type: 2,  master: master }})
      event.cancelBubble = true
    },
    switchActive(index) {
      this.activeIndex = index
      var data = this.dataList[index]
      console.log(data)
      if (!data.results.length) {
        this.initData()
      }
    },
    getCatalogs: function() {
      var that = this
      if (this.$store.getters.masterCatalogs.length) {
        this.catalogs = this.catalogs.concat(this.$store.getters.masterCatalogs)
        this.$store.getters.masterCatalogs.forEach(function() {
          that.dataList.push({results: []})
        })
      } else {
        request.getCatalogs(consts.CATALOG_TYPE_MASTER, function(err, res) {
          if (!err) {
            that.catalogs = that.catalogs.concat(res.results)
            res.results.forEach(function() {
              that.dataList.push({ results: [] })
            })
            var payload = {
              type: consts.CATALOG_TYPE_MASTER,
              catalogs: res.results
            }
            that.$store.dispatch('getCatalogs', payload)
          }
        })
      }
    },
    /*
     * 获取列表数据
     */
    initData(callback=null) {
      var params = {}
      var catalog = this.catalogs[this.activeIndex]
      if (!this.activeIndex) {
        params = { 'status': 2, 'user_type': 2 }
      } else {
        params = { 'catalog': catalog.id, 'user_type': 2 }
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.get('/users/master/', { params: params })
      .then(function (res) {
        that.$toast.clear()
        console.log(res)
        if (res.status === 200) {
          that.dataList[that.activeIndex].results = res.data.results
          that.dataList[that.activeIndex].previous = res.data.previous
          that.dataList[that.activeIndex].next = res.data.next
          that.dataList[that.activeIndex].count = res.data.count
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    
    },
  }
}

</script>

<style lang="scss" scoped>

.tabs-wrapper {
  margin-top: 2px;
}

.master-list-wrapper {
  margin-top: 10px;
}
</style>
